<template>
	<div>
		<van-sticky>
			<navHeader></navHeader>
		</van-sticky>
		<van-dropdown-menu>
		     <van-dropdown-item v-model="value1" @change="changeGoods(value1)" :options="option1" />
			 <van-dropdown-item v-model="value2" @change="filterMoney(value2)" :options="option2" />
			 <van-dropdown-item v-model="value3" @change="filterYear(value3)" :options="option3" />
		     <van-dropdown-item v-model="value4" @change="sortGoods(option4)" :options="option4" />
		   </van-dropdown-menu>
		<div  v-for="(item,index) in list" :key='item.id'>
			<van-card
			  @click='toDetail(item)'
			  :price="item.price+'W'"
			  :title="item.content"
			  :thumb="item.img[0]"
			  :tag='JSON.stringify(item.start)'
			>
			<span slot='num'>{{item.last}}万公里</span>
			</van-card>
			
		
		</div>
	</div>
</template>

<script>
	import navHeader from '../components/nav.vue'
	export default {
		components:{
		navHeader
		},
		data(){
			return{
				 value1: 2,
				 value2: 'a',
				 value3: '0',
				 value4: 'a',
				  option1: [
				   { text: '宝马', value: 0 },
				   { text: '奔驰', value: 1 },
				   { text: '玛莎拉蒂', value: 2 },
				   { text: '保时捷', value: 3 },
				   { text: '劳斯莱斯', value: 4 },
				   { text: '本田', value: 5 },
				  ],
				  option2: [
				    { text: '5-10万', value: 'a' },
				    { text: '10-20万', value: 'b' },
				    { text: '30万以上', value: 'c' },
				  ],
				  option3: [
				    { text: '1-2年', value: '0' },
				    { text: '3-5年', value: '1' },
				    { text: '5年以上', value: '2' },
				  ],
				  option4: [
				    { text: '默认排序', value: 'a' },
				    { text: '价格排序', value: 'b' },
				    { text: '车龄排序', value: 'c' },
				  ],
				  list:[]
			}
		},methods:{
			filterMoney(id){
				if(this.value2=='a'){
					this.list = this.list.filter(val=>val.price>5&&val.price<10);
					console.log(this.list)
				}else if(this.value2 =='b'){
					this.list = this.list.filter(val=>val.price>10&&val.price<20);
					
				}else{
					this.list = this.list.filter(val=>val.price>30);
					
				}
			},
			filterYear(id){
				if(this.value2==0){
					this.list = this.list.filter(val=>val.start>2018&&val.start<2020);
					console.log(this.list)
				}else if(this.value2 ==1){
					this.list = this.list.filter(val=>val.start>2015&&val.start<2017);
				}else{
					this.list = this.list.filter(val=>val.start<2010);
				}
			},
			sortGoods(){
				if(this.value4=='a'){
					this.list.sort();
				}else if(this.value4 =='b'){
					this.list.sort((o1,o2)=>{
						let val1 = parseInt(o1.price);
						let val2 = parseInt(o2.price);
						if (val1 >val2) {
						        return -1;//上
								console.log(val,val2);
						    } else if (val1 <val2) {
						        return 1;//下
								console.log(val,val2);
						    } else {
						        return 0;
						    }  
					})
				}else{
					this.list.sort((o1,o2)=>{
						let val1 = o1.start;
						let val2 = o2.start;
						if (val1 < val2) {
						        return -1;
						    } else if (val1 > val2) {
						        return 1;
						    } else {
						        return 0;
						    }  
					})
				}
			},
			changeGoods(id){
				
				this.list = this.$api.goodsData[id];
				console.log(this.list)				
			},
			toDetail(item){
				localStorage.setItem('goods',JSON.stringify(item))
				this.$router.push({path:'/detail'});
			}
		},
		created(){
			this.changeGoods(0);
			this.value1 = this.$route.query.id?this.$route.query.id:0;
		}
	}
</script>

<style scoped="">
	.bannerTop{
		background: pink;
		width: 100%;
		height: 50px;
	}
	.bannerText{
		color: white;
		font-size: 18px;
		line-height: 50px;
		font-weight: bold;
	}
</style>
